<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="utf-8">
    <title>SCUF</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Sistema Carpool Universitário FACCAT">
    <meta name="keywords" content="Carpool, Carona, FACCAT">
    <meta name="author" content="Ariela Crippa de Oliveira">
    <meta name="author" content="Laura Krupp Elgelmann">
    <meta name="author" content="Cândido Luciano de Farias">
    <meta name="author" content="Rodrigo Casara">
    <?php
      // fav icon
      echo $this->Html->meta('icon');
      // styles
      echo $this->Html->css(array('principal',
                                  'bootstrap.min',
                                  'bootstrap-responsive.min',
                                  'jquery.ui.all',
                                  'jquery.pnotify.default',
                                  'jquery.pnotify.default.icons',
                                  'oxygen-icons',
                                  'iphone-style-checkboxes',
                                  'tabelas'));
      // scripts
      echo $this->Html->script(array('modernizr.min',
                                     'jquery',
                                     'jquery.ui.core',
                                     'jquery.ui.widget',
                                     'jquery.ui.position',
                                     'jquery.pnotify.min',
                                     'jquery.form',
                                     'jquery.maskMoney',
                                     'jquery.ui.autocomplete', // TODO: verificar se pode ser substituído por Typeahead do bootstrap.
                                     'iphone-style-checkboxes',
                                     'jquery.metadata',
                                     'jquery.validate',
                                     'additional-methods',
                                     'bootstrap.min',
                                     'underscore-min',
                                     'backbone-min',
                                     'moment.min',
                                     'locale/moment/pt', // lang-all.min
                                     'app/scuf'));
    ?>
    <script type="text/javascript">
      moment.lang("pt");
    </script>
    <!--<script type="text/javascript" src="http://maps.google.com/maps?file=api&sensor=false"></script>-->
  </head>
  <body>
    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" id="logo" href="#home">Carpool FACCAT</a>
          <div id="btnMenuUsuario" class="btn-group pull-right">
            <a  class="btn dropdown-toggle btn-primary" data-toggle="dropdown" href="#">
            </a>
            <ul class="dropdown-menu">
              <li><a href="#perfil">Perfil</a></li>
              <li class="divider"></li>
              <li><a href="#logout">Sair</a></li>
            </ul>
          </div>
          <div class="nav-collapse" id="main-menu">
            <ul class="nav">
              <li><a href="#home">Home</a></li>
              <li><a href="#sobre">Sobre</a></li>
            </ul>
            <ul class="nav pull-right">
              <li><a id="btnLogin" href="#">Login</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="hero-unit">
        <h1>Carpooling Universitário</h1>
        <p>... um jeito fácil de estudantes e funcionários partilharem carona.</p>
      </div>
      <div class="row">
        <div id="conteudo" class="span9">
          <?php echo PHP_EOL . $content_for_layout . PHP_EOL . PHP_EOL; ?>
        </div>
        <div class="span3">
          <aside class="well sidebar-nav">
            <p>
              A boléia ou carona solicitada em ruas e estradas pode ser chamada <strong>autostop</strong>,
              um termo cunhado na França para o ato de estar à beira de uma via à espera de transporte.
            </p>
            <p>
              O termo carona usado no Brasil pode ser traduzido de três formas para a língua inglesa, cada
              uma com seu significado específico. A carona feita regularmente entre amigos ou colegas de
              trabalho é chamada <q><em>carpool</em></q>, enquanto que a carona solicitada em vias públicas a
              desconhecidos é designada <q><em>hitchhiking</em></q>. A carona <q>clássica</q>, ou seja, a
              carona esporádica entre conhecidos é referida pela expressão <q><em>get a lift</em></q> ou
              <q><em>get a ride</em></q>.
            </p>
          </aside>
        </div>
      </div>
      <hr />
      <footer>
        <p class="pull-right">
          <?php
            echo $this->Html->link($this->Html->image('logo_faccat.png', array('alt' => 'FACCAT')),
                                   'http://www.faccat.br',
                                   array('target' => '_blank', 'escape' => false));
          ?>
        </p>
        <p>&copy; 2012 Faculdades Integradas de Taquara. Todos os direitos reservados.</p>
      </footer>
      <div class="modal hide fade in" id="modalLogin">
      <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>Login</h3>
      </div>
      <div class="modal-body">
        <form id="frmLogin"
              class="form-horizontal"
              action="<?php echo $this->Html->url(array('controller' => 'pessoas', 'action' => 'login')); ?>"
                method="post"
                accept-charset="utf-8">
            <fieldset>
              <div class="control-group required">
                <label class="control-label" for="PessoaEmail">E-mail</label>
                <div class="controls">
                  <input class="span3"
                         id="PessoaEmail"
                         type="email"
                         name="data[Pessoa][email]"
                         tabindex="1"
                         autofocus
                         data-rules="{rules:{required:true,email:true,messages:{required:'Obrigatório',email:'E-mail inválido'}}}"
                         required>
                  <span class="help-inline"></span>
                </div>
              </div>
              <div class="control-group required">
                <label class="control-label" for="PessoaSenha">Senha</label>
                <div class="controls">
                  <input class="span3"
                         id="PessoaSenha"
                         type="password"
                         name="data[Pessoa][senha]"
                         tabindex="2"
                         data-rules="{rules:{required:true,minlength:6,messages:{required:'Obrigatório',minlength:'A senha deve conter no mínimo 6 caracteres'}}}"
                         required>
                  <span class="help-inline"></span>
                  <span class="help-block"><a href="#recuperar_senha">Esqueci minha senha...</a></span>
                  <span class="help-block"><a href="#registrar-se">Novo usuário? Cadastre-se agora, é grátis!</a></span>
                </div>
              </div>
              <em>* Obrigatório</em>
            </fieldset>
          </form>
        </div>
        <div class="modal-footer">
          <button type="submit" form="frmLogin" class="btn btn-primary btn-large">Login</button>
        </div>
      </div>

      <?php echo $this->element('sql_dump'); ?>

    </div>
    <script type="text/javascript">
      (function($) {
        // pnotify defaults {{{
        $.pnotify.defaults.pnotify_history = false;
        $.pnotify.defaults.pnotify_animation = function(status, callback, pnotify) {
          var cur_angle = 0;
          var cur_opacity_scale = 0;
          if (status == 'out') cur_opacity_scale = 1;
          var timer = setInterval(function() {
            cur_angle += 10;
            if (cur_angle == 360) {
              cur_angle = 0;
              cur_opacity_scale = 1;
              if (status == 'out') cur_opacity_scale = 0;
              clearInterval(timer);
            } else {
              cur_opacity_scale = cur_angle / 360;
              if (status == 'out') cur_opacity_scale = 1 - cur_opacity_scale;
            }
            pnotify.css({
              '-moz-transform': ('rotate(' + cur_angle + 'deg) scale(' + cur_opacity_scale + ')'),
              '-webkit-transform': ('rotate(' + cur_angle + 'deg) scale(' + cur_opacity_scale + ')'),
              '-o-transform': ('rotate(' + cur_angle + 'deg) scale(' + cur_opacity_scale + ')'),
              '-ms-transform': ('rotate(' + cur_angle + 'deg) scale(' + cur_opacity_scale + ')'),
              'filter': ('progid:DXImageTransform.Microsoft.BasicImage(rotation=' + (cur_angle / 360 * 4) + ')')
            }).fadeTo(0, cur_opacity_scale);
            if (cur_angle == 0) {
              if (status == 'out') pnotify.hide();
              callback();
            }
          }, 20);
        };
        //}}}
        var Rotas = Backbone.Router.extend({
          routes: {
            ":page": "acionarCarregamentoDePagina",
            "*page": "acionarCarregamentoDePagina",
          },
          initialize: function(options) {
          },
          acionarCarregamentoDePagina: function(pagina) {
            $("#main-menu ul.nav li").removeClass("active").children('a[href="#' + pagina + '"]').closest("li").addClass("active");
            //
            var url;
            //if (pagina.match(/^(home|sobre)$/)) {
            //  url = 'pages/' + pagina;
            //} else {
              url = pagina;
            //}
            //
            if (url) {
              this.carregarPagina(url);
            }
          },
          carregarPagina: function(urlDaPagina) {
            $("#modalLogin").modal("hide");
            $.ajax({
              url: urlDaPagina,
              dataType: "html",
              beforeSend: function() {
                if (!urlDaPagina.match(/^login$/)) {
                  $("#conteudo").html('<div id="carregando-pagina"></div>');
                }
              },
              success: function(data, textStatus, jqXHR) {
                if (urlDaPagina.match(/^login$/)) {
                  $("#conteudo").append(data)
                } else {
                  $("#conteudo").html(data);
                }

                if (urlDaPagina.match(/^logout$/)) {
                  rotas.navigate('home', {trigger: false, replace: false}); // Apenas muda o endereço da rota na URL sem atualizar
                  $("#main-menu ul.nav li").removeClass("active").children('a[href="#home"]').closest("li").addClass("active");
                  $("#btnLogin").show();
                  $("#btnMenuUsuario").hide().html('');
                }
              },
              error: function(jqXHR, textStatus, errorThrown) {
                $("#conteudo").html(jqXHR.responseText);
              },
              statusCode: {
                '403': function() { // Forbidden
                  $("#btnLogin").click();
                }
              }
            });
          },
        });
        //
        var rotas = new Rotas();
        Backbone.emulateHTTP = true;
        Backbone.emulateJSON = true;
        Backbone.history.start();
        if (!Backbone.history.fragment) {
          // Chama a função da rota (trigger: true) e atualiza a URL sem criar uma entrada no histórico do navegador (replace: true).
          Backbone.history.navigate("home", {trigger: true, replace: true});
        }
        //
        $("#btnLogin").click(function(e) {
          e.preventDefault();
          $("#frmLogin").resetForm();
          $("#modalLogin").modal("show").children("div.modal-body").children("div.alert").remove();
        });

        $.metadata.setType('attr', 'data-rules');
        $("#frmLogin").validate({
          meta: "rules",
          errorPlacement: function (error, element) {
            $(element).parents("div.control-group").addClass("error");
            $(".help-inline", $(element).parents("div.controls")).text($(error).text()).fadeIn();
          },
          unhighlight: function(element, errorClass, validClass) {
            $(element).parents("div.control-group").removeClass("error");
            $(".help-inline", $(element).parents("div.controls")).fadeOut();
          },
          submitHandler: function(formulario) {
            $(formulario).ajaxSubmit({
              dataType: "json",
              success: function(respostaJson, statusText, xhr, $form) {
                if (respostaJson.sucesso == true) {
                  rotas.navigate(respostaJson.urlRedirecionamento.replace('/', ''), {trigger: true, replace: true});
                  $("#btnLogin").hide();
                  $("#btnMenuUsuario").show();
                  $("#btnMenuUsuario > a").html('<i class="icon-user icon-white"></i> ' + respostaJson.usuario + ' <span class="caret"></span>');
                  $.pnotify({
                    pnotify_title: 'Login efetuado com sucesso!',
                    pnotify_text: 'Você está logado com o usuário <strong>' + respostaJson.usuario + '</strong>.',
                    pnotify_type: 'info'
                    //pnotify_info_icon: 'picon picon-dialog-information'
                  });
                } else {
                  $.pnotify({
                    pnotify_title: 'Login',
                    pnotify_text: respostaJson.mensagem,
                    pnotify_type: 'error',
                    //pnotify_info_icon: 'picon picon-dialog-information'
                  });
                  //
                  //$("#modalLogin div.modal-body").prepend(respostaJson.mensagem);
                  if (respostaJson.campos !== undefined) {
                    $.each(respostaJson.campos,  function(campo, erro) {
                      var objCampo = $("input[name='" + campo + "']", $form);
                      $(objCampo).parents("div.control-group").addClass("error");
                      $(".help-inline", $(objCampo).parents("div.controls")).text(erro).fadeIn();
                    });
                  }
                }
              }
            });
          }
        });
        //
        <?php if ($logged_in) : ?>
          $("#btnLogin").hide();
          $("#btnMenuUsuario > a").html(
            '<i class="icon-user icon-white"></i> ' +
            <?php echo "'{$usuario_logado['nome']}'"; ?> +
            ' <span class="caret"></span>'
          );
        <?php else : ?>
          $("#btnMenuUsuario").hide();
        <?php endif; ?>
      })(jQuery);
    </script>
  </body>
</html>